<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<h1 style="font-size: 50px;text-align: center">添加空气质量信息</h1>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">监测区域</label>
        <div class="layui-input-inline">
            <select name="districtId" id="districtSelect" lay-filter="districtId">

            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">监测日期</label>
        <div class="layui-input-inline">
            <input type="text" name="monitorTime" id="monitorTime" autocomplete="off" placeholder="yyyy-MM-dd"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">PM10值</label>
        <div class="layui-input-inline">
            <input type="text" name="pm10" autocomplete="off" placeholder="输入pm10值"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">PM25值</label>
        <div class="layui-input-inline">
            <input type="text" name="pm25" autocomplete="off" placeholder="输入pm25值"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">监测站</label>
        <div class="layui-input-inline">
            <input type="text" name="monitoringStation" autocomplete="off" placeholder="请输入检测站"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="*">保存</button>
            <button type="reset" class="layui-btn ">重置</button>
            <button type="button" class="layui-btn">关闭</button>
        </div>
    </div>
</form>

<script src="layui/layui.js"></script>
<script>
    layui.use(['form', 'laydate'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.$;

        //手动发送ajax请求，获取到下拉列表需要的数据并且动态的插入到<select>标签体内，并且渲染
        $.ajax({
            url: "/district/list",
            data: null,
            type: "GET",
            dataType: "JSON",
            success: function (result) {
                if (result.code == 0) {
                    var json = result.data;
                    var content = "<option value='0'>不限</option>";
                    for (var i = 0; i < json.length; i++) {
                        content += "<option value= '" + json[i].id + "'>" + json[i].name + "</option>";
                    }
                    console.log(content);
                    $("#districtSelect").html(content);
                    form.render('select');
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("凉凉~~~");
            },
        });

        // 渲染时间的表单输入框
        laydate.render({
            elem: '#monitorTime'
        });

        //监听submit的提交
        form.on('submit(*)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            var parametr = data.field;

            //发送ajax请求保存数据
            $.ajax({
                url: "/air/add",
                data: parametr,
                type: "POST",
                dataType: "JSON",
                success: function(result) {
                    if(result.code == 0){
                        // 关闭当前弹出层
                        layer.msg("添加成功!!");
                        //当你在iframe页面关闭自身时
                        setTimeout(function(){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        },1000);

                    }else{
                        layer.msg(result.msg);
                    }
                },
                error: function(){
                    layer.msg("凉凉~~~")
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>

</body>
</html>